<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.p1 {
				width: 100px;
				height: 100px;
				margin: 20px;
				background-color: red;
				transition: 1s;
			}
		</style>
	</head>
	<body>
		<div class="p1"></div>
		<button class="p2">显示</button>
		<button class="p3">隐藏</button>
		<button class="p4">显示/隐藏</button>

		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script>
			$(function() {
				/*
				jQuery hide() 和 show()
				通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
				*/
				$("button[class='p2']").click(function() {
					$("div[class='p1']").show(1000);
				})
				$("button[class='p3']").click(function() {
					$("div[class='p1']").hide(1000, "linear", function() {
						alert("隐藏完成！");
					});
				})
				/*
				jQuery toggle()
				通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
				*/
				$("button[class='p4']").click(function() {
					$("div[class='p1']").toggle();
				});
			})
		</script>
	</body>
</html>